import { Component, ComponentUnitType } from "@/stores/edit-pages-store";
import { ComponentConfig } from "@/stores/low-editor-comps-conf";
export type EditPositionType = {
  top: number;
  left: number;
  width: number;
  height: number;
  borderWidth: string;
} | null;
export function updatePosition(
  {
    componentId, curComponent, containerClassName, curComponentUnitType, schema, popEditing,
    setPosition, setEditPosition,componentConf
  }: {
    componentId: string;
    curComponent: Component | null;
    containerClassName: string;
    curComponentUnitType: ComponentUnitType | undefined;
    schema: Component;
    popEditing: Boolean;
    setPosition: (position: {
      top: number;
      left: number;
      width: number;
      height: number;
      labelTop: number;
      labelLeft: number;
    }) => void;
    setEditPosition?: (position: {
      top: number;
      left: number;
      width: number;
      height: number;
      borderWidth: string
    }|null) => void;
    componentConf: ComponentConfig
  },
) {
  if (!componentId) return;
  const container = document.querySelector(`.${containerClassName}`);
  if (!container) return;

  let wrapQueryValue = `[data-component-id="${componentId}"]`
  
  const acceptNum = componentConf.accept ? Object.keys(componentConf.accept).length : 0
  let editRegionType
  editRegionType = curComponentUnitType ? curComponentUnitType : (
    acceptNum === 0 ? undefined : (acceptNum === 1 ? (componentConf.defaultEditRegion || "body"): undefined)
  )
  if(curComponentUnitType){
    editRegionType = curComponentUnitType
  }else{
    if(acceptNum === 1){
      editRegionType = componentConf.defaultEditRegion || "body"
    }else{
      editRegionType = undefined
    }
  }
  let editQueryValue;
  if(acceptNum>0){
    editQueryValue = editRegionType ? `${wrapQueryValue}[data-component-unit-type="${editRegionType}"]`: null
  }
  
  const node = document.querySelector(wrapQueryValue) as HTMLElement;
  let editRegion = editQueryValue ? document.querySelector(editQueryValue) : null

  if(!editRegion && editQueryValue && !curComponentUnitType){
    editRegion = node
  }
  if (!node) return;

  const { top, left, width, height, right } = node.getBoundingClientRect();
  const { top: containerTop, left: containerLeft } = container.getBoundingClientRect();
  
  let labelTop = top - containerTop + container.scrollTop;
  let labelLeft = left - containerLeft + width;
  
  let selectHeight = height
  
  if(curComponent && ['TableColumn', "TableOperationColumn"].includes(curComponent.name)){
    //表格列高度特殊处理
    const parentTable = document.getElementById(`table_dev_${curComponent.parentId}`)
    if(parentTable){
      selectHeight = parentTable.clientHeight
    }
  }
  
  const outerObj = {
    top: top - containerTop + container.scrollTop,
    left: left - containerLeft + container.scrollTop,
    width,
    height: selectHeight,
    labelTop,
    labelLeft,
  }
  setPosition(outerObj);

  //额外的交互逻辑
  const { top: editRegionTop, left: editRegionLeft, width: editRegionWidth, height: editRegionHeight } = editRegion?.getBoundingClientRect () || {top:0,left:0,width:0,height:0,bottom:0};
  let editTop=0,editLeft=0
  if(editRegion){
    editTop = editRegionTop - containerTop + editRegion.scrollTop;
    editLeft = editRegionLeft - containerLeft + editRegionWidth;
  }
  if(editRegion){
    if(setEditPosition){
      const innerObj = {
        top: editRegionTop - containerTop + editRegion.scrollTop,
        left: editRegionLeft - containerLeft + editRegion.scrollTop,
        width: editRegionWidth,
        height: editRegionHeight,
        labelTop: editTop,
        labelLeft: editLeft,
      }
      const borderWidth = `
      ${innerObj.top - outerObj.top}px
      ${outerObj.width - (innerObj.left - outerObj.left) - innerObj.width}px
      ${outerObj.height - innerObj.height - (innerObj.top - outerObj.top)}px
      ${innerObj.left - outerObj.left}px`

      const editObj={
        top: innerObj.top - outerObj.top,
        left: innerObj.left - outerObj.left,
        width: innerObj.width,
        height: innerObj.height,
        borderWidth
      }
      setEditPosition(editObj)
    }
  }else{
    setEditPosition?.(null)
  }
}